<template>
  <a-form-item :label="station.label" class="stationItem">
    <a-select
      v-decorator="[
        station.id,
        {
          rules: [{ required: true, message: station.message }],
        },
      ]"
      :placeholder="station.placeholder"
      @change="selectStation"
      show-search
      allowClear
      class="selectStation"
    >
      <a-select-option v-for="item in stationList" :key="item.name">
        {{ item.name }}
      </a-select-option>
    </a-select>
  </a-form-item>
</template>

<script>
import { getStationList } from "@/api/station";

export default {
  props: {
    station: {
      type: Object,
      default() {
        return {
          label: "",
          id: "",
          message: "",
          placeholder: "",
        };
      },
    },
  },
  data() {
    return {
      stationList: [],
    };
  },
  mounted() {
    this.getStationList();
  },
  methods: {
    async getStationList() {
      await getStationList().then((res) => {
        if (res.code === 200) {
          this.stationList = res.data;
        }
      });
    },
    selectStation(station) {
      this.$emit("change", station);
    },
  },
};
</script>

<style lang="less" scoped>
.selectStation {
  /deep/ .ant-select-selection--single {
    width: 195px !important;
  }
}
</style>
